Intro JavaScript

00Coder, c'est quoi ?

Un ordinateur est extrêmement rapide mais complètement bête : il fait exactement ce qu'on lui dit, ligne par ligne, sans jamais deviner ce qu'on « voulait dire ». Coder, c'est écrire ces instructions dans un langage précis qu'il comprend.

JavaScript (JS) est le langage des navigateurs web. Toutes les pages interactives que tu utilises (menus, formulaires, jeux, cartes…) en contiennent. Il tourne aussi sur des serveurs (Node.js), dans des applis, des objets connectés…

Les 3 couches d'une page web

 ┌────────────┐   ┌────────────┐   ┌────────────────┐
 │   HTML     │   │    CSS     │   │  JavaScript    │
 │ le contenu │ + │ l'apparence│ + │ le comportement│
 │ "un titre" │   │ "en rouge" │   │ "si on clique, │
 │            │   │            │   │  il grossit"   │
 └────────────┘   └────────────┘   └────────────────┘
   index.html       style.css         script.js

Un programme = des instructions, dans l'ordre

Le code se lit de haut en bas. Chaque ligne est une instruction, généralement terminée par un point-virgule ;. Essaie : clique sur Exécuter.

premier-programme.js

La console du navigateur Appuie sur F12 (ou clic droit → Inspecter) puis onglet « Console ». C'est l'outil n°1 du développeur : on y voit les messages et les erreurs. Tu peux même y taper du JavaScript directement.

01La console & les commentaires

console.log(...) affiche ce qu'on met entre les parenthèses. C'est ton meilleur ami pour comprendre ce qui se passe dans ton code : quand quelque chose ne marche pas, on affiche des valeurs pour vérifier.

console.js

Bonne pratique Un bon commentaire explique pourquoi on fait quelque chose, pas seulement quoi. Le code dit déjà « quoi » ; le commentaire raconte l'intention.

02Les variables : des boîtes avec une étiquette

Une variable est une boîte qui porte un nom et contient une valeur. On la crée (on dit déclare) une fois, puis on l'utilise par son nom.

   let age = 20;

   ┌─────────┐
   │   20    │  ← la valeur (ce qu'il y a dedans)
   └─────────┘
      age        ← l'étiquette (le nom de la variable)

Mot-clé	Peut-on changer la valeur ?	Quand l'utiliser
`const`	Non	Par défaut, tout le temps
`let`	Oui	Quand la valeur doit évoluer (compteur, score…)
`var`	Oui	Jamais : ancienne syntaxe, comportements piégeux

variables.js

La portée (scope) : où une variable existe

Une variable déclarée avec let ou const n'existe que dans le bloc { } où elle est créée. En dehors, elle est invisible.

portee.js

03Les types de données

Toute valeur a un type. Les principaux :

Type	Exemple	C'est quoi
`string`	`"bonjour"`	Du texte (chaîne de caractères)
`number`	`42`, `3.14`	Un nombre (entier ou à virgule, avec un point)
`boolean`	`true`, `false`	Vrai ou faux
`undefined`	`undefined`	« Pas encore de valeur »
`null`	`null`	« Vide, volontairement »
`object`	`{ }`, `[ ]`	Une structure qui regroupe des valeurs (chap. 8 et 9)

types.js

// typeof permet de connaître le type d'une valeur
console.log(typeof "salut");      // "string"
console.log(typeof 12);           // "number"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"

let pasEncore;                    // déclarée mais jamais remplie
console.log(pasEncore);           // undefined

// --- Les textes (strings) ---
// 3 sortes de guillemets : "doubles", 'simples', `backticks`
const ville = "Le Havre";
const phrase1 = "J'habite au " + ville;      // + colle les textes (concaténation)
const phrase2 = `J'habite au ${ville}`;      // gabarit : ${...} insère une valeur
console.log(phrase1);
console.log(phrase2);
console.log(`2 + 2 = ${2 + 2}`);             // on peut même calculer dedans

// Les strings ont des "méthodes" : des actions qu'on leur demande
console.log(ville.length);          // nombre de caractères
console.log(ville.toUpperCase());   // en majuscules
console.log(ville.includes("Havre"));// contient "Havre" ? → true
console.log(ville[0]);              // 1er caractère (on compte à partir de 0 !)

// --- Conversion de types ---
console.log("5" + 3);      // "53"  ← piège : + avec un texte = collage !
console.log("5" * 3);      // 15    ← * force la conversion en nombre
console.log(Number("5") + 3); // 8  ← on convertit explicitement : plus clair
console.log(String(42));   // "42"

Piège classique Ce qu'on récupère d'un champ de formulaire est toujours du texte, même si l'utilisateur tape un nombre. Pense à le convertir avec Number().

04Les opérateurs

operateurs.js

// --- Arithmétique ---
console.log(7 + 2);   // 9   addition
console.log(7 - 2);   // 5   soustraction
console.log(7 * 2);   // 14  multiplication
console.log(7 / 2);   // 3.5 division
console.log(7 % 2);   // 1   MODULO : le reste de la division (7 = 3×2 + 1)
console.log(2 ** 3);  // 8   puissance (2×2×2)

// Le modulo sert souvent à savoir si un nombre est pair :
console.log(10 % 2 === 0);  // true → 10 est pair

// --- Raccourcis d'affectation ---
let n = 10;
n += 5;    // pareil que n = n + 5   → 15
n -= 3;    // n = n - 3              → 12
n *= 2;    // n = n * 2              → 24
n++;       // n = n + 1              → 25
console.log(n);

// --- Comparaison : le résultat est TOUJOURS un booléen ---
console.log(5 > 3);     // true
console.log(5 <= 3);    // false
console.log(5 === 5);   // true   strictement égal (même valeur ET même type)
console.log(5 !== 4);   // true   différent

// ⚠ == (double égal) convertit les types avant de comparer : piégeux !
console.log(5 == "5");   // true   😬
console.log(5 === "5");  // false  ✔ utilise TOUJOURS ===

// --- Logique : combiner des conditions ---
const aFaim = true;
const aDeLArgent = false;
console.log(aFaim && aDeLArgent);  // ET  : vrai seulement si les DEUX sont vrais → false
console.log(aFaim || aDeLArgent);  // OU  : vrai si AU MOINS UN est vrai       → true
console.log(!aFaim);               // NON : inverse                             → false

Exercice — Une pizza coûte 12 €, on en commande 3, et on a un bon de réduction de 20 %. Calcule et affiche le prix final avec des variables bien nommées.

Voir une solution

solution.js

05Les conditions : prendre des décisions

Un programme doit souvent choisir : si quelque chose est vrai, faire ceci, sinon faire cela.

             ┌──────────────┐
             │ age >= 18 ?  │
             └──────┬───────┘
           oui ┌────┴────┐ non
               ▼         ▼
          "majeur"    "mineur"

conditions.js

const age = 16;   // ← change cette valeur et ré-exécute

// if (condition) { ... } else { ... }
if (age >= 18) {
  // ce bloc s'exécute seulement si la condition est vraie
  console.log("Tu es majeur·e");
} else {
  // sinon, c'est celui-ci
  console.log("Tu es mineur·e");
}

// Plusieurs cas : else if
const note = 14;
if (note >= 16) {
  console.log("Très bien");
} else if (note >= 12) {
  console.log("Bien");            // ← on s'arrête au PREMIER cas vrai
} else if (note >= 10) {
  console.log("Passable");
} else {
  console.log("Insuffisant");
}

// L'opérateur ternaire : un if/else compact pour choisir une VALEUR
// condition ? valeurSiVrai : valeurSiFaux
const statut = age >= 18 ? "adulte" : "enfant";
console.log(statut);

// Valeurs "truthy" / "falsy" : dans un if, toute valeur devient vrai ou faux.
// Sont FAUSSES : false, 0, "" (texte vide), null, undefined, NaN
// Tout le reste est VRAI.
const pseudo = "";
if (pseudo) {
  console.log("Bienvenue " + pseudo);
} else {
  console.log("Tu n'as pas de pseudo !");
}

switch : comparer une valeur à plusieurs cas précis

switch.js

06Les boucles : répéter sans se répéter

Afficher les nombres de 1 à 1000 ? On ne va pas écrire 1000 lignes. Une boucle répète un bloc de code tant qu'une condition est vraie.

boucles.js

// --- La boucle for : quand on sait combien de fois répéter ---
//   for (départ ; condition pour continuer ; étape après chaque tour)
for (let i = 1; i <= 5; i++) {
  console.log("Tour n°" + i);
}
// Déroulé : i=1 → affiche → i++ (i=2) → 2<=5 ? oui → affiche → … → i=6 → 6<=5 ? non → fin

// --- La boucle while : tant que la condition est vraie ---
let pieces = 3;
while (pieces > 0) {
  console.log(`Il reste ${pieces} pièce(s)`);
  pieces--;          // ⚠ sans cette ligne : BOUCLE INFINIE, la page gèle !
}
console.log("Plus de pièces.");

// --- break et continue ---
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) continue;   // continue : saute au tour suivant (on ignore les pairs)
  if (i > 7) break;            // break : sort complètement de la boucle
  console.log("impair :", i);
}

// --- Boucles imbriquées : une table de multiplication ---
for (let ligne = 1; ligne <= 3; ligne++) {
  let texte = "";
  for (let col = 1; col <= 5; col++) {
    texte += (ligne * col) + "\t";   // \t = tabulation
  }
  console.log(texte);
}

Exercice : FizzBuzz (un classique des entretiens d'embauche !) — Affiche les nombres de 1 à 20, mais : remplace les multiples de 3 par « Fizz », ceux de 5 par « Buzz », et ceux de 3 et 5 par « FizzBuzz ».

Un indice

Utilise le modulo %. Et teste d'abord le cas « 3 ET 5 »… pourquoi ?

Voir une solution

fizzbuzz.js

07Les fonctions : des recettes réutilisables

Une fonction est un morceau de code auquel on donne un nom, pour pouvoir le lancer (on dit appeler) autant de fois qu'on veut. Elle peut recevoir des paramètres (les ingrédients) et renvoyer un résultat (le plat).

   paramètres          fonction            valeur renvoyée
   (3, 4)   ───▶  ┌──────────────┐  ───▶      7
                  │  additionner │
                  └──────────────┘

fonctions.js

// 1. DÉCLARER la fonction (on écrit la recette, rien ne s'exécute encore)
function direBonjour(prenom) {      // "prenom" est un PARAMÈTRE
  console.log(`Bonjour ${prenom} !`);
}

// 2. APPELER la fonction (on cuisine) : nom + parenthèses
direBonjour("Ada");                 // "Ada" est un ARGUMENT
direBonjour("Alan");

// --- return : renvoyer un résultat ---
function additionner(a, b) {
  return a + b;                      // return renvoie la valeur ET arrête la fonction
  console.log("jamais affiché");     // code mort : après un return, plus rien ne s'exécute
}
const resultat = additionner(3, 4);  // on récupère ce qui est renvoyé
console.log(resultat);               // 7
console.log(additionner(10, additionner(1, 2)));  // on peut imbriquer : 13

// Sans return, une fonction renvoie undefined
console.log(direBonjour("Grace"));   // affiche le bonjour, PUIS undefined

// --- Paramètre par défaut ---
function saluer(nom = "inconnu·e") {
  return "Salut " + nom;
}
console.log(saluer());               // "Salut inconnu·e"
console.log(saluer("Linus"));

// --- Fonction fléchée (arrow function) : syntaxe courte, très utilisée ---
const carre = (x) => x * x;          // si une seule expression : return implicite
const auCube = x => {                // avec des accolades : return obligatoire
  const c = x * x * x;
  return c;
};
console.log(carre(5), auCube(3));

Les fonctions sont des valeurs

En JS, une fonction peut être rangée dans une variable, ou passée en argument à une autre fonction. Une fonction passée ainsi s'appelle un callback (« rappel »). C'est une idée centrale en JavaScript.

callbacks.js

Exercice — Écris une fonction estPair(n) qui renvoie true ou false, puis une fonction maximum(a, b) qui renvoie le plus grand des deux nombres.

Voir une solution

solution.js

08Les tableaux : des listes de valeurs

Un tableau (array) range plusieurs valeurs dans l'ordre. Chaque case a un numéro, l'indice, qui commence à 0.

   const fruits = ["pomme", "kiwi", "poire"];

   indice :    0        1        2
            ┌───────┬───────┬───────┐
            │ pomme │ kiwi  │ poire │      fruits.length → 3
            └───────┴───────┴───────┘

tableaux.js

const fruits = ["pomme", "kiwi", "poire"];

console.log(fruits[0]);            // "pomme"  (1er élément)
console.log(fruits.length);        // 3
console.log(fruits[fruits.length - 1]); // le DERNIER élément
console.log(fruits[10]);           // undefined : la case n'existe pas

// Modifier
fruits[1] = "mangue";              // remplace "kiwi"
fruits.push("banane");             // ajoute à la FIN
fruits.unshift("fraise");          // ajoute au DÉBUT
console.log(fruits);

const dernier = fruits.pop();      // retire (et renvoie) le dernier
console.log("retiré :", dernier, "→", fruits);

// Rechercher
console.log(fruits.includes("poire"));   // true
console.log(fruits.indexOf("poire"));    // sa position (-1 si absent)

// Parcourir : for...of donne directement chaque élément
for (const fruit of fruits) {
  console.log("J'aime la " + fruit);
}

// 💡 Pourquoi "const" alors qu'on modifie le tableau ?
// const empêche de remplacer la BOÎTE (fruits = autre chose),
// mais on peut changer son CONTENU.

Les super-pouvoirs : map, filter, reduce…

Ces méthodes prennent une fonction (un callback, vu au chapitre 7) et l'appliquent à chaque élément. Elles ne modifient pas le tableau d'origine : elles en renvoient un nouveau. C'est le style « moderne » de JS.

map-filter-reduce.js

const notes = [12, 8, 15, 19, 6, 11];

// forEach : fait quelque chose pour chaque élément (ne renvoie rien)
notes.forEach((note, indice) => console.log(`Élève ${indice} : ${note}`));

// map : TRANSFORME chaque élément → nouveau tableau de même taille
const notesSur100 = notes.map(note => note * 5);
console.log("sur 100 :", notesSur100);

// filter : GARDE seulement les éléments pour lesquels la fonction renvoie true
const reussites = notes.filter(note => note >= 10);
console.log("≥ 10 :", reussites);

// find : renvoie le PREMIER élément qui correspond
console.log("1re note > 14 :", notes.find(note => note > 14));

// reduce : RÉDUIT le tableau à une seule valeur (ici : la somme)
//   acc = l'accumulateur (le résultat en cours), 0 = sa valeur de départ
const somme = notes.reduce((acc, note) => acc + note, 0);
console.log("somme :", somme, "moyenne :", (somme / notes.length).toFixed(2));

// sort : trie (⚠ modifie le tableau ! on copie d'abord avec [...notes])
const triees = [...notes].sort((a, b) => a - b);
console.log("triées :", triees);

// On peut ENCHAÎNER les méthodes :
const resultat = notes
  .filter(n => n >= 10)      // on garde les réussites
  .map(n => n + 1)           // on ajoute un point bonus
  .join(" / ");              // on colle en un seul texte
console.log(resultat);

09Les objets : décrire une chose

Un tableau range des valeurs par position. Un objet les range par nom : des paires clé: valeur qu'on appelle propriétés. Idéal pour décrire un utilisateur, un produit, un personnage…

objets.js

const perso = {
  nom: "Link",          // clé "nom", valeur "Link"
  vie: 3,
  inventaire: ["épée", "bouclier"],   // une valeur peut être un tableau…
  position: { x: 10, y: 4 },          // …ou un autre objet
  // Une fonction dans un objet s'appelle une MÉTHODE
  sePresenter() {
    // "this" désigne l'objet lui-même
    return `Je suis ${this.nom}, j'ai ${this.vie} cœurs.`;
  },
};

// Lire une propriété : notation pointée
console.log(perso.nom);
console.log(perso.position.x);
console.log(perso.inventaire[0]);

// Notation crochets : utile quand le nom de la clé est dans une variable
const cle = "vie";
console.log(perso[cle]);

// Modifier / ajouter / supprimer
perso.vie -= 1;              // modifie
perso.niveau = 1;            // ajoute une nouvelle propriété
delete perso.position;       // supprime
console.log(perso.sePresenter());
console.log(perso);

// Parcourir les clés
for (const k in perso) {
  console.log("clé :", k);
}
console.log(Object.keys(perso));     // tableau des clés

Syntaxes modernes très courantes

moderne.js

const film = { titre: "Akira", annee: 1988, realisateur: "Ōtomo" };

// DÉSTRUCTURATION : extraire des propriétés dans des variables
const { titre, annee } = film;
console.log(titre, annee);

// Fonctionne aussi avec les tableaux (par position)
const [premier, second] = ["or", "argent", "bronze"];
console.log(premier, second);

// SPREAD (...) : "étaler" le contenu pour copier / fusionner
const filmComplet = { ...film, genre: "animation" };  // copie + ajout
console.log(filmComplet);
const tous = [...[1, 2], ...[3, 4]];
console.log(tous);

// CHAÎNAGE OPTIONNEL ?. : évite l'erreur si une propriété n'existe pas
console.log(film.suite?.titre);      // undefined (au lieu d'une TypeError)

// Un tableau d'objets : LA structure de données la plus courante sur le web
const eleves = [
  { nom: "Inès", age: 19 },
  { nom: "Tom", age: 22 },
  { nom: "Léa", age: 20 },
];
const noms = eleves.filter(e => e.age >= 20).map(e => e.nom);
console.log(noms);

// JSON : le format texte pour échanger des données (avec un serveur, un fichier…)
const texteJSON = JSON.stringify(eleves[0]);     // objet → texte
console.log(texteJSON, typeof texteJSON);
const objetRelu = JSON.parse('{"nom":"Sam","age":21}'); // texte → objet
console.log(objetRelu.nom);

Copie ou référence ? const b = a; ne copie pas un objet ou un tableau : a et b désignent alors le même objet. Modifier l'un modifie l'autre. Pour copier : const b = { ...a }; ou [...a].

10Le DOM : piloter la page avec JS

Quand le navigateur lit le HTML, il construit en mémoire un arbre d'objets : le DOM (Document Object Model). JavaScript peut lire et modifier cet arbre… et la page change instantanément à l'écran.

  document
   └── html
        ├── head
        │    └── title
        └── body
             ├── h1        ← document.querySelector("h1")
             └── div.carte ← document.querySelector(".carte")
                  └── p

Note sur les exemples Dans une vraie page, on cherche les éléments dans document. Ici, chaque exemple a sa petite zone blanche nommée scene : on écrit scene.querySelector(...) pour ne toucher qu'elle. Le principe est identique.

dom.js

// 1. SÉLECTIONNER un élément avec un sélecteur CSS (comme dans style.css)
const titre = scene.querySelector("h4");          // par balise
const boite = scene.querySelector(".boite");      // par classe
const items = scene.querySelectorAll("li");       // TOUS les <li>

console.log(titre, boite, items.length);

// 2. MODIFIER le texte
titre.textContent = "Titre modifié par JavaScript ✨";

// 3. MODIFIER le style (propriétés CSS en camelCase : background-color → backgroundColor)
boite.style.backgroundColor = "#d4a017";
boite.style.padding = "12px";
boite.style.borderRadius = "8px";

// 4. AJOUTER / RETIRER des classes CSS (mieux que style : on garde le CSS dans le CSS)
boite.classList.add("important");
console.log(boite.classList.contains("important"));   // true

// 5. MODIFIER chaque élément d'une liste
items.forEach((li, i) => {
  li.textContent = `Élément n°${i + 1} (modifié)`;
});

// 6. CRÉER un nouvel élément et l'ajouter dans la page
const nouveau = document.createElement("p");    // crée <p></p> (pas encore affiché)
nouveau.textContent = "Je viens d'être créé !";
scene.append(nouveau);                          // l'insère à la fin de la scène

// 7. Lire / modifier un attribut
const lien = scene.querySelector("a");
lien.setAttribute("href", "https://developer.mozilla.org/fr/");
lien.textContent = "Documentation MDN";

Un titre

Une boîte

un
deux
trois

un lien

textContent ou innerHTML ? innerHTML interprète le texte comme du HTML ("<b>gras</b>" devient gras). Pratique, mais dangereux avec du texte tapé par un utilisateur : il pourrait injecter du code (faille « XSS »). Par défaut, utilise textContent.

11Les événements : réagir à l'utilisateur

Un événement, c'est quelque chose qui se produit : un clic, une touche pressée, la souris qui bouge, un formulaire envoyé… On demande au navigateur : « quand tel événement arrive sur tel élément, exécute cette fonction ». C'est le rôle de addEventListener (« ajouter un écouteur »).

evenements.js

// Exécute ce code, PUIS clique sur les éléments de la zone blanche ↓

const bouton = scene.querySelector("#compteur");
const champ = scene.querySelector("#champ");
const apercu = scene.querySelector("#apercu");
const carre = scene.querySelector("#carre");

// --- Un compteur de clics ---
let clics = 0;   // l'ÉTAT : une variable qui garde la mémoire entre deux clics

bouton.addEventListener("click", () => {
  clics++;
  bouton.textContent = `Cliqué ${clics} fois`;
  console.log("clic !", clics);
});

// --- Réagir à la saisie ---
// "input" se déclenche à chaque caractère tapé
champ.addEventListener("input", (evenement) => {
  // evenement.target = l'élément qui a déclenché l'événement
  const texte = evenement.target.value;
  apercu.textContent = texte.toUpperCase() || "(vide)";
});

// --- Survol de la souris ---
carre.addEventListener("mouseenter", () => carre.style.transform = "rotate(45deg) scale(1.2)");
carre.addEventListener("mouseleave", () => carre.style.transform = "");

// --- Position de la souris ---
carre.addEventListener("mousemove", (e) => {
  // offsetX / offsetY : position dans l'élément, en pixels
  carre.textContent = `${e.offsetX},${e.offsetY}`;
});

console.log("Écouteurs installés. À toi de jouer !");

→ (vide)

survole

Les événements les plus utiles

Événement	Se déclenche quand…
`click`	on clique
`input`	la valeur d'un champ change (à chaque frappe)
`submit`	un formulaire est envoyé (penser à `e.preventDefault()`)
`keydown`	une touche est enfoncée (`e.key` dit laquelle)
`mouseenter` / `mouseleave`	la souris entre / sort
`scroll`	on fait défiler
`DOMContentLoaded`	le HTML est entièrement chargé

12L'asynchrone : gérer le temps qui passe

Jusqu'ici, tout s'exécutait instantanément, dans l'ordre. Mais certaines actions prennent du temps : attendre 2 secondes, télécharger des données sur internet… JavaScript ne bloque pas la page en attendant : il continue et revient plus tard quand le résultat est prêt. C'est l'asynchrone.

timers.js

Les promesses et async / await

Une Promise (promesse) est un objet qui représente un résultat futur : « je n'ai pas encore la réponse, mais je te promets de te la donner (ou de te dire que ça a échoué) ». Le mot-clé await permet d'attendre une promesse, dans une fonction marquée async.

async-await.js

// Une fonction qui renvoie une promesse résolue après "ms" millisecondes
function attendre(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

// Simule une commande au restaurant qui peut échouer
function commander(plat) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (plat === "licorne") {
        reject(new Error("Plat introuvable 🦄"));  // échec
      } else {
        resolve(`🍽 ${plat} servi !`);              // succès
      }
    }, 800);
  });
}

// async : cette fonction peut utiliser await
async function repas() {
  console.log("On s'installe…");
  await attendre(500);                 // ⏸ on attend ici (sans bloquer la page !)
  console.log("On commande.");

const plat = await commander("pizza");  // await "déballe" la promesse
  console.log(plat);

// try / catch pour gérer l'échec d'une promesse
  try {
    const autre = await commander("licorne");
    console.log(autre);
  } catch (erreur) {
    console.warn("Problème :", erreur.message);
  }
  console.log("L'addition, s'il vous plaît.");
}

repas();

fetch : récupérer des données sur internet

fetch(url) envoie une requête à un serveur et renvoie une promesse. On récupère le plus souvent du JSON (chapitre 9). Ici, on interroge une API de test gratuite (connexion internet nécessaire).

fetch.js

const liste = scene.querySelector("ul");
liste.innerHTML = "<li>Chargement…</li>";

try {
  // 1. On envoie la requête et on ATTEND la réponse du serveur
  const reponse = await fetch("https://jsonplaceholder.typicode.com/users");

// 2. On vérifie que tout s'est bien passé (code HTTP 200-299)
  if (!reponse.ok) throw new Error("Erreur HTTP " + reponse.status);

// 3. On transforme le corps de la réponse (texte JSON) en vrais objets JS
  const utilisateurs = await reponse.json();
  console.log(`${utilisateurs.length} utilisateurs reçus`);
  console.log("Le premier :", utilisateurs[0].name, "-", utilisateurs[0].email);

// 4. On les affiche dans la page
  liste.innerHTML = "";                      // on vide
  for (const u of utilisateurs.slice(0, 5)) { // les 5 premiers seulement
    const li = document.createElement("li");
    li.textContent = `${u.name} (${u.address.city})`;
    liste.append(li);
  }
} catch (erreur) {
  // Pas de connexion, serveur en panne…
  liste.innerHTML = "<li>Impossible de charger les données.</li>";
  console.error(erreur.message);
}

(rien encore)

13Les classes : des moules à objets

Quand on doit créer beaucoup d'objets du même genre (des ennemis dans un jeu, des produits dans une boutique…), on écrit un moule : une classe. Chaque objet fabriqué avec est une instance. C'est la base de la programmation orientée objet.

classes.js

class Animal {
  // constructor est appelé automatiquement à chaque "new Animal(...)"
  constructor(nom, cri) {
    this.nom = nom;        // "this" = l'objet en cours de fabrication
    this.cri = cri;
    this.energie = 10;
  }

// une méthode, partagée par toutes les instances
  parler() {
    console.log(`${this.nom} fait « ${this.cri} »`);
  }

manger(quantite = 1) {
    this.energie += quantite;
    return this;           // renvoyer "this" permet d'enchaîner : a.manger().manger()
  }
}

// "new" fabrique une instance à partir de la classe
const chat = new Animal("Minou", "miaou");
const vache = new Animal("Marguerite", "meuh");
chat.parler();
vache.parler();
chat.manger(2).manger(3);
console.log(chat.nom, "a", chat.energie, "d'énergie");

// --- HÉRITAGE : une classe qui étend une autre ---
class Chien extends Animal {
  constructor(nom) {
    super(nom, "wouf");     // super(...) appelle le constructeur du PARENT
    this.tours = [];
  }
  apprendre(tour) {
    this.tours.push(tour);
    console.log(`${this.nom} sait maintenant : ${this.tours.join(", ")}`);
  }
  // On peut REDÉFINIR une méthode du parent
  parler() {
    super.parler();          // on garde le comportement du parent…
    console.log("(et remue la queue)");  // …et on en ajoute
  }
}

const rex = new Chien("Rex");
rex.parler();
rex.apprendre("assis");
rex.apprendre("couché");
console.log(rex instanceof Chien, rex instanceof Animal);  // true true
console.log(rex);

14Mini-projet : le jeu du nombre mystère

On rassemble tout : variables, conditions, fonctions, DOM, événements. L'ordinateur choisit un nombre entre 1 et 100 ; le joueur doit le deviner en un minimum d'essais. Exécute, joue, puis lis le code et améliore-le !

jeu.js

// ====== 1. LES ÉLÉMENTS DE LA PAGE ======
const formulaire = scene.querySelector("form");
const champ      = scene.querySelector("input");
const message    = scene.querySelector(".message");
const historique = scene.querySelector(".historique");
const rejouer    = scene.querySelector(".rejouer");

// ====== 2. L'ÉTAT DU JEU ======
// Tout ce dont le jeu doit "se souvenir" pendant la partie
const MAX = 100;              // constante en MAJUSCULES : convention pour un réglage
let mystere;                  // le nombre à trouver
let essais;                   // nombre de tentatives
let termine;                  // la partie est-elle finie ?

// ====== 3. LES FONCTIONS ======

// Renvoie un entier aléatoire entre 1 et max (inclus)
function nombreAleatoire(max) {
  // Math.random() → nombre à virgule entre 0 (inclus) et 1 (exclu)
  // × max → entre 0 et max ; Math.floor arrondit vers le bas ; +1 → de 1 à max
  return Math.floor(Math.random() * max) + 1;
}

function afficher(texte, couleur) {
  message.textContent = texte;
  message.style.color = couleur;
}

function nouvellePartie() {
  mystere = nombreAleatoire(MAX);
  essais = 0;
  termine = false;
  historique.textContent = "";
  rejouer.hidden = true;           // cache le bouton "rejouer"
  champ.disabled = false;
  champ.value = "";
  champ.focus();                   // place le curseur dans le champ
  afficher(`J'ai choisi un nombre entre 1 et ${MAX}. À toi !`, "inherit");
  console.log("(triche) le nombre est", mystere);
}

function verifier(proposition) {
  // Garde-fous : on refuse les saisies invalides
  if (Number.isNaN(proposition) || proposition < 1 || proposition > MAX) {
    afficher(`Entre un nombre entre 1 et ${MAX} !`, "#d64545");
    return;                         // on sort de la fonction tout de suite
  }

essais++;
  historique.textContent += proposition + " ";

if (proposition === mystere) {
    afficher(`🎉 Bravo ! Trouvé en ${essais} essai${essais > 1 ? "s" : ""}.`, "#2f9e5b");
    termine = true;
    champ.disabled = true;
    rejouer.hidden = false;
  } else if (proposition < mystere) {
    afficher("C'est plus ⬆", "#d4a017");
  } else {
    afficher("C'est moins ⬇", "#d4a017");
  }
}

// ====== 4. LES ÉVÉNEMENTS ======
formulaire.addEventListener("submit", (e) => {
  e.preventDefault();               // empêche le rechargement de la page (comportement par défaut d'un form)
  if (termine) return;
  verifier(Number(champ.value));    // ⚠ value est un TEXTE : on convertit !
  champ.value = "";
  champ.focus();
});

rejouer.addEventListener("click", nouvellePartie);  // on passe la fonction, SANS ()

// ====== 5. LANCEMENT ======
nouvellePartie();

/* 💪 IDÉES D'AMÉLIORATION :
   - Limiter à 7 essais, puis "Perdu ! C'était X"
   - Garder le meilleur score (une variable en dehors de nouvellePartie)
   - Dire "Tu chauffes 🔥" si on est à moins de 5 du nombre
   - Ajouter un choix de difficulté (MAX = 10, 100 ou 1000)
*/

Clique sur « Exécuter » pour lancer le jeu.

Essais :

15Et après ?

Récapitulatif

Notion	À retenir
Variables	`const` par défaut, `let` si ça change
Comparaison	Toujours `===` et `!==`
Fonctions	Petites, un seul rôle, un nom qui dit ce qu'elles font
Tableaux	`map`, `filter`, `find`, `reduce`
DOM	`querySelector`, `textContent`, `classList`
Événements	`addEventListener("click", fonction)`
Asynchrone	`async` / `await` + `try` / `catch`

Comment progresser

Lis les erreurs : elles disent presque toujours où et pourquoi.
console.log partout quand tu ne comprends pas ce qui se passe.
Découpe : un gros problème = plein de petits problèmes faciles.
Copie moins, tape plus : écrire le code soi-même ancre la mémoire.
Relis script.js de cette page : tu sais maintenant tout lire !

Ressources

MDN Web Docs — la référence, en français
javascript.info — tutoriel complet et clair
p5.js — dessiner et animer avec JS, idéal en école d'art
CodePen — tester HTML/CSS/JS en ligne et partager

Défi final — Crée ta propre page (un nouveau dossier avec index.html, style.css, script.js) : une liste de tâches où l'on peut ajouter une tâche via un champ, la cocher (classe CSS « faite ») et la supprimer. Tout ce qu'il faut est dans les chapitres 8, 10 et 11.